<template>
  <div class="pop" :class="{ betPro: appStore.isProBet }">
    <div class="popup-lf">
      <div
        class="li"
        v-for="(item, index) in list"
        :class="[currentIndex === index ? 'actives' : '']"
        @click="setCurrentGameType(index)"
        :key="index"
      >
        {{ item.playTypeName }}
      </div>
    </div>
    <div class="popup-content">
      <Handicap @update-template="getBetList"/>
      <div v-if="appStore.isProBet" class="tips">
        单期最高派奖{{ numberToChinese(allGame?.[lotteryCode]?.maxReward) }}万
      </div>
      <BetList v-for="(item, index) in list" :key="index" v-show="index === currentIndex" :list="item" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, watchEffect, provide, watch, unref } from 'vue'
import { getLotteryTemplate, submitBetNow } from '@/api'
import BetList from './betList.vue'
import { useInvestStore } from '@/stores/invest'
import { $utils } from '@utils'
import { showToast } from 'vant'
import { useAppStore } from '@/stores/app'
import { numberToChinese } from '@/utils'
import { useGameStore } from '@/stores/game'
import { storeToRefs } from 'pinia'
import Handicap from '@/components/Handicap.vue'

type Props = {
  lotteryCode: string
  isSame: boolean
}

const props = defineProps<Props>()

const list = ref([])

const currentIndex = ref(0)

const investStore = useInvestStore()

const emits = defineEmits(['update:isSame'])

const selectBetList = ref([])

const appStore = useAppStore()

const gameStore = useGameStore()

const { allGame, currentHandicapCode } = storeToRefs(gameStore)

provide('selectBetList', selectBetList)

const setCurrentGameType = (idx: number): void => {
  currentIndex.value = idx

  selectBetList.value = []

  investStore.setInvestNum([])

}

watchEffect(() => {
  const item = list.value[currentIndex.value]

  const last = investStore.lastInvestList

  const code = item?.playTypeCode

  const idx = last.findIndex((i) => i.playTypeCode === code)

  emits('update:isSame', idx > -1)
})

const getBetList = async () => {
  try {
    const { data } = await getLotteryTemplate({
      lotteryCode: props.lotteryCode,
      handicapCode: unref(currentHandicapCode) 
    })
    list.value = data
  } catch {
    /* empty */
  }
}

const open = () => {
  getBetList()
}

const betLoading = ref(false)

const betNow = async () => {
  if (betLoading.value) return

  const _selectBetList = [...investStore.investList]

  if (!$utils.verifyBetAmount(_selectBetList)) return

  let params: any = {
    lotteryCode: props.lotteryCode, //彩种类型，如六合彩LHC
    orderDetails: [],
  }

  const capCode = unref(currentHandicapCode.value)

  if (capCode) params.handicapCode = capCode

  _selectBetList.forEach((numItem) => {
    params.orderDetails.push({
      lotteryCode: props.lotteryCode, // 彩种类型，如六合彩LHC
      playTypeCode: numItem.playTypeCode, // 彩种CODE，
      sonPlayTypeCode: numItem.sonPlayTypeCode, // 选中号码 的item信息
      playCode: numItem.playCode, // 选中号码 的item信息
      betContent: numItem.playCode, // 注单内容，与playCode保持一致
      betAmount: numItem.betAmount, // 单注金额
    })
  })

  betLoading.value = true

  try {
    await submitBetNow(params)
    // if (code != 200) {
    //   return
    // }
    showToast('下注成功')
    investStore.setLastInvestList([..._selectBetList])
    investStore.setInvestNum([])
    selectBetList.value = []
  } catch {
    /* empty */
  }
  betLoading.value = false
}

const clearInvestList = () => {
  investStore.setInvestNum([])
  selectBetList.value = []
}

const fillLastNumber = () => {
  const list = investStore.lastInvestList

  selectBetList.value = [...list]

  investStore.setInvestNum(selectBetList.value)
}

watch(
  () => investStore.investList,
  (n) => {
    selectBetList.value = [...n]
  },
  {
    deep: true,
  },
)

defineExpose({
  open,
  betNow,
  clearInvestList,
  fillLastNumber,
})
</script>

<style scoped lang="less">
.pop {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  height: 100%;
  background: rgba(23, 26, 38, 1);

  &.betPro {
    .popup-lf {
      max-height: calc(100% - 150px);
    }
  }

  .popup-lf {
    width: 74px;
    background: #2a2d47;
    border-radius: 0 5px 5px 0;
    color: #a4b5f2;
    margin-top: 12px;
    box-sizing: border-box;
    max-height: calc(100% - 170px);
    overflow-y: auto;
    scroll-behavior: smooth;

    .li {
      font-size: 13px;
      height: 60px;
      display: flex;
      justify-content: center;
      align-items: center;

      &.actives {
        border-left: none;
        position: relative;
        color: #fff;
        &::before {
          content: '';
          position: absolute;
          left: 0;
          top: 0;
          width: 4px;
          height: 100%;
          background: linear-gradient(180deg, #9077ff 0%, #4b3ef6 100%);
          border-radius: 0 12px 12px 0;
        }
      }
    }
  }

  .popup-content {
    width: 100%;
    display: flex;
    height: calc(100% - 130px);
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    padding: 12px 10px 40px 10px;
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .pop-tailbox {
    max-height: 220px;
    overflow-y: auto;
  }

  .popup-rg {
    margin-bottom: 20px;
    flex: 1;
    box-sizing: border-box;
    margin-left: 5px;
    padding: 3px;
    background-image: linear-gradient(to bottom, #f0f2f7, #dae1f4);
    border-radius: 5px;
    .pop-tailbox {
      .pop-tailtext {
        font-size: 10px;
        color: #7084ce;
        text-align: left;
        margin-left: 0px;
        .span1 {
          font-size: 10px;
          color: red;
          .span2 {
            font-size: 12px;
          }
        }
      }
      .pop-tailnum {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-wrap: wrap;
        .pop-tailboxbox {
          flex: 1;
          display: flex;
          justify-content: center;
          align-items: center;
          border: 1px solid #a2b6ff;
          background-image: linear-gradient(to bottom, #ffffff, #e8eefa);
          margin: 2px 1px;
          padding: 2px 2px;
          border-radius: 5px;
          .pop-tailnums {
            width: 19px;
            height: 19px;
            border: 1px solid #a2b6ff;
            border-radius: 50%;
            background-image: linear-gradient(to bottom, #ffffff, #e8eefa);
            line-height: 19px;
            color: #3d65fb;
          }
          .pop-tailnumss {
            color: #7b85a6;
            font-size: 11px;
            margin-left: 2px;
          }
        }
        .popactives {
          background: #3d65fb;
          .pop-tailnumss {
            color: #ffff;
          }
        }
      }
    }
    .pop-rg {
      box-sizing: border-box;
      margin-left: 5px;
      padding: 3px;
      background-image: linear-gradient(to bottom, #f0f2f7, #dae1f4);
      border-radius: 5px;
      .pop-text {
        font-size: 10px;
        color: #7084ce;
        text-align: left;
      }
      .pop-namebox {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin-top: 5px;
        .pop-name {
          border: 1px solid #afbdef;
          border-radius: 5px;
          //    flex: 1;
          width: 22%;
          color: #5e6994;
          margin: 0 2px;
          padding: 1px 0;
          background-image: linear-gradient(to bottom, #ffffff, #e8eefa);
          .pop-names {
            font-size: 10px;
          }
          .pop-texts {
            font-size: 9px;
          }
        }
        .activeti {
          background: #3d65fb;
          color: #c1bebe;
        }
      }
    }
    .poprg-btm {
      .pop-text {
        font-size: 10px;
        color: #7084ce;
        text-align: left;
        margin-left: 10px;
      }
      .pop-namebox {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-wrap: wrap;
        .pop-name {
          border: 1px solid #4570f2;
          border-radius: 50%;
          color: #4570f2;
          width: 23.5px;
          height: 23.5px;
          margin: 3px 6px;
          line-height: 23.5px;
          background-image: linear-gradient(to bottom, #ffffff, #e8eefa);
          .pop-names {
            font-size: 12px;
          }
        }
        .activete {
          background-image: linear-gradient(to bottom, #6a98ff, #254ee7);
          color: #fff;
        }
      }
    }
  }
}

.tips {
  margin-bottom: 7px;
  font-size: 12px;
  color: rgba(246, 68, 54, 1);
}
</style>
